<template>
    <div>

        <nav class="blog-nav layui-header">
            <div class="layui-container">

                <a href="javascript:" class="blog-user" id="login">
                    <!-- <i class="fa fa-qq"></i> -->
                </a>


                <a class="blog-logo" href="/" style="color:rgb(255,251,0);">爱上歆随懿恫</a>
                <ul class="blog-nav-list">
                    <li class="layui-nav-item  ">
                        <router-link to='/'><i class="fa fa-home fa-fw"></i>网站首页 </router-link>


                    </li>
                    <li class="layui-nav-item">

                        <lay-dropdown trigger="hover" updateAtScroll>
                            <a href="javascript:;">开发文档</a>
                            <template #content>
                                <lay-dropdown-menu>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/webos/doc">
                                            webos开发文档
                                        </router-link>

                                    </lay-dropdown-menu-item>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/vuewebos/doc">
                                            vuewebos开发文档
                                        </router-link>
                                    </lay-dropdown-menu-item>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/webosapp/doc">
                                            webosapp开发文档
                                        </router-link>
                                    </lay-dropdown-menu-item>
                                </lay-dropdown-menu>
                            </template>
                        </lay-dropdown>
                    </li>

                    <li class="layui-nav-item " v-for="(menu, index) in menus" :key="index">

                        <router-link :to="menu.path"><i :class="menu.ioc"></i>{{ menu.name }}</router-link>
                    </li>

                    <li class="layui-nav-item">

                        <lay-dropdown trigger="hover" updateAtScroll>
                            <a href="javascript:;">在线工具</a>
                            <template #content>
                                <lay-dropdown-menu>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/online/countdown">
                                            倒计时
                                        </router-link>

                                    </lay-dropdown-menu-item>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/online/imgtobase">
                                            图片转base64
                                        </router-link>
                                    </lay-dropdown-menu-item>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/online/json">
                                            json解析
                                        </router-link>
                                    </lay-dropdown-menu-item>
                                    <lay-dropdown-menu-item>
                                        <router-link to="/online/bonus">
                                            分红计算器
                                        </router-link>
                                    </lay-dropdown-menu-item>
                                </lay-dropdown-menu>
                            </template>
                        </lay-dropdown>
                    </li>

                </ul>
                <!-- v-on:click="detail()" -->
                <a class="blog-navicon" @click="openmuen()" href="javascript:;">
                    <i class="fa fa-navicon"></i>
                </a>
            </div>
        </nav>
        <!--侧边导航-->
        <ul :class="ismaskshow == true ? mhide : mshow">
            <li class="layui-nav-item  layui-this">
                <a href="/mian"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item " v-for="(menu, index) in menus" :key="index">

                <a href="javascript:" @click="opne(menu)"><i :class="menu.ioc"></i>&nbsp;{{ menu.name }}</a>
            </li>

        </ul>
        <!--遮罩-->
        <div :class="ismaskshow == true ? hide : show" @click="close"></div>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
export default {
    name: 'header',
    setup() {
        const route = useRoute();
        const router = useRouter();
        const ismaskshow = ref(true);
        const hide = ref("blog-mask animated layui-hide");
        const show = ref("blog-mask animated maskIn layui-show");
        const mhide = ref("layui-nav-tree layui-nav-side blog-nav-left layui-hide");
        const mshow = ref("layui-nav-tree layui-nav-side blog-nav-left leftIn layui-show");
        const menus = ref([

            {
                show: true,
                ioc: "fa fa-book ",
                name: "常用应用",
                path: "/news/product",

            },

            {
                show: true,
                ioc: "fa fa-download",
                name: "下载",
                path: "/news/ppt",
            },
            {
                show: true,
                ioc: "fa fa-shopping-cart ",
                name: "淘宝查券",
                path: "/news/taobao",

            },
            {
                show: true,
                ioc: "fa fa-grav ",
                name: "我的博客",
                path: "/news/list",

            }
        ]) as any;
        const close = () => {
            ismaskshow.value = true;
        }
        const openmuen = () => {
            if (ismaskshow.value == true) {
                ismaskshow.value = false;
            } else {
                ismaskshow.value = true;
            }
        }
        //const route = useRoute();
        const changeSelectedKey = (res: any) => {
            //var query = new Object() as any;
            selectedKey.value = res;
            openKeys.value = res;
            router.push({ path: res, query: {}, params: {} })

        }
        const opne = (a: any) => {
            router.push({ path: a.path, query: {}, params: {} })
            ismaskshow.value = true;
        }
        const selectedKey = ref(route.path)
        const openKeys = ref([route.path])
        console.log(router);
        return {
            selectedKey,
            openKeys,
            changeSelectedKey,
            menus,
            hide,
            show,
            ismaskshow,
            openmuen,
            mhide,
            mshow, close, opne
        }
    }
}
</script>
<style>
.layui-nav {
    background-color: #fff0;
}

.layui-nav .layui-nav-more {
    right: 0px;
}
</style>
